<template>
  <div class="shop">
    <!-- 顶部导航 -->
    <nav-bar class="nav-bar">
      <template #center>
        <div>购物车({{ length }})</div>
      </template>
    </nav-bar>

    <!--  中部商品列表  -->
    <scroll class="content" ref="scroll">
      <cart-list/>
    </scroll>

    <!--  底部汇总  -->
    <cart-bottom-bar @isSumUp="isSum"/>

    <!-- Toast -->
    <toast ref="toast"/>
  </div>
</template>

<script>
import CartList from "@/views/shop/childComps/CartList";
import CartBottomBar from "@/views/shop/childComps/CartBottomBar";

import NavBar from "@/components/common/navbar/NavBar";
import Scroll from "@/components/common/scroll/Scroll";
import Toast from '@/components/common/toast/Toast'

import {mapGetters} from 'vuex'

export default {
  name: "Shop",
  components: {
    NavBar,
    CartList,
    Scroll,
    CartBottomBar,
    Toast
  },
  computed: {
    /* 加载getters内的属性方法,放到计算属性中 */
    /* 数组语法 */
    // ...mapGetters(['cartLength'])
    /* 对象语法 */
    ...mapGetters({
      length: 'cartLength'
    })
  },
  activated() {
    this.$refs.scroll.scroll.refresh()
  },
  methods: {
    isSum(obj) {
      let checked = false
      const cartList = this.$store.state.cartList

      cartList.forEach(p => {
        if (p.checked) {
          console.log('p', p.checked)
          checked = true
        }
      })

      console.log(checked)

      if (cartList.length === 0) {
        this.$refs.toast.show('请添加商品')
      } else if (!checked) {
        this.$refs.toast.show('请选择要结算的商品')
      } else {
        this.$refs.toast.show('结算成功,共:' + obj.totalPrice + '元')
      }
    }
  }
}
</script>

<style scoped>
.shop {
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  color: #ffffff;
}

.content {
  height: calc(100% - 44px - 49px - 40px);
  overflow: hidden;
}


</style>
